<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <style>
        a{
            text-decoration: none;
            color: white;
        }
        a:hover{
            text-decoration: none;
        }
        #userManage{
            color: grey;
        }
        #providerManage{
            color: grey;
        }
        #userModify{
            color: grey;
        }
        #pagingul{height: 34px;}
        #pagingul1{
            height: 34px;
            float: right;
        }
    </style>
</head>
<%--设置在新窗口打开--%>
<%--    <base href="" target="_blank">--%>
    <body>
        <div class="container">
            <div class="row clearfix">
                <div class="col-md-12">
                    <h2>欢迎登录-${sessionScope.userSession.userName}</h2>
                </div>
            </div>

            <%--订单管理标题--%>
            <div class="row clearfix">
                <div class="col-md-12 page-header"></div>
            </div>

            <%--订单查询及添加按钮--%>
            <div class="row clear">
                <div class="row-md-12">
                    <%--查询--%>
                    <%--交给Ajax--%>
                    <div class="row clear">
                        <div class="col-md-0">
                            <div class="form-inline">

                                <%--商品名称--%>
                                <input style="width: 300px" type="text" class="form-control" id="billQueryCriteria" placeholder="productName">

                                <%--供应商名称--%>
                                <select id="proNameList" class="form-control">

                                </select>

                                <%--是否付款--%>
                                <select id="queryIsPayment" class="form-control">
                                    <option value="0" selected>isPayment</option>
                                    <option value="1">未付款</option>
                                    <option value="2">已付款</option>
                                </select>
                                <button class="btn btn-primary" id="billQueryBtn" onclick="show()" style="height: 34px;">
                                    &emsp;<span class="glyphicon glyphicon-search"></span>&emsp;
                                </button>
<%--                                <input type="button" class="btn btn-primary" value="Query" onclick="show()">--%>
                            </div>
                        </div>
                    </div>

                    <%--添加--%>
                    <c:if test="${sessionScope.userSession.userRole!=0 and sessionScope.userSession.userRole!=1}">
                        <div class="col-md-offset-11">
                            <button type="button" class="btn btn-danger">
                                <a href="${pageContext.request.contextPath}/user/billDo/addBillPage">&emsp;<span class="glyphicon glyphicon-plus"></span>Add&emsp;</a>
                            </button>
                        </div>
                    </c:if>
                </div>
            </div>


            <div class="row clearfix">
               <div class="row-md-12">
                   <table class="table table-hover">
                       <thead>
                        <tr>
                            <th>billCode</th>
                            <th>productName</th>
                            <%--供应商名称--%>
                            <th>proName</th>
                            <%--订单金额--%>
                            <th>totalPrice</th>
                            <%--是否付款--%>
                            <th>isPayment</th>
                            <%--创建日期--%>
                            <th>creationDate</th>
                        </tr>
                       </thead>
                       <tbody id="billTbody">

                       </tbody>
                   </table>

                   <%--翻页按钮--%>
                   <div id="pagingdiv">
                       <nav aria-label="Page navigation">
                           <ul class="pagination" id="pagingul"></ul>
                           <ul class="pagination" id="pagingul1"></ul>
                       </nav>
                   </div>

               </div>
            </div>

        </div>

        <%@include file="viewbill.jsp"%>

        <!-- 模态框   信息删除确认 -->
        <div class="modal fade" id="delcfmOverhaul">
            <div class="modal-dialog">
                <div class="modal-content message_align">
                    <div class="modal-header">
                        <h4 class="modal-title">提示</h4>
                    </div>
                    <div class="modal-body">
                        <!-- 隐藏需要删除的id -->
                        <input type="hidden" id="deleteBillId"/>
                        <p>您确认要删除该条订单信息吗？</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="close" data-dismiss="modal"
                                aria-label="Close">
                            <button type="button" class="btn btn-default"
                                    data-dismiss="modal">取消</button>
                        </button>
                        <button type="button" class="btn btn-danger" id="deleteHaulBtn">delete</button>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>

        <%--这两个导入有顺序--%>
        <script src="${pageContext.request.contextPath}/webjars/jquery/3.6.0/jquery.js"></script>
        <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
                integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
        <script>

            //总记录数
            let totalNum;
            //总页数
            let totalPage;
            //默认每页显示数
            let pageSize = 5;
            //默认显示第一页
            let currentPageNo = 1;

            function show() {
                console.log('\n'+$('#billQueryCriteria').val());
                console.log($('#proNameList').val());
                console.log($('#queryIsPayment').val());
            }

            // 打开询问是否删除的模态框并设置需要删除的ID
            let showDeleteModal = function (id) {
                let delete_billId = id;
                console.log('\n要删除的id为：'+id);
                $("#deleteBillId").val(delete_billId);// 将模态框中需要删除d的name设为需要删除的name
                $("#delcfmOverhaul").modal({
                    // backdrop : 'static', backdrop：’static’指的是点击背景空白处不被关闭；
                    //keyboard: false指的是触发键盘esc事件时不关闭。
                    keyboard : false
                });
            }

            // 查看信息模态框的内容
            let CheckModalContent = function (id) {
                $.ajax({
                    url: "${pageContext.request.contextPath}/user/billDo/check",
                    type: "POST",
                    data: {
                        id: id
                    },
                    success: function (data) {
                        let bill =data;
                        let html = "<p><strong>订单编号：</strong><span>"+bill.billCode+"</span></p>"+
                                    "<p><strong>商品名称：</strong><span>"+bill.productName+"</span></p>"+
                                    "<p><strong>商品单位：</strong><span>"+bill.productUnit+"</span></p>"+
                                    "<p><strong>商品数量：</strong><span>"+bill.productCount+"</span></p>"+
                                    "<p><strong>总金额：</strong><span>"+bill.totalPrice+"</span></p>"+
                                    "<p><strong>供应商：</strong><span>"+bill.proName+"</span></p>"+
                                    "<p><strong>是否付款：</strong>";
                        if(bill.isPayment === 1){
                            html += "<span>已付款</span>";
                        }
                        if(bill.isPayment === 2){
                            html += "<span>未付款</span>";
                        }
                        html += "</p>";
                        $('#checkModel').html(html);
                    }
                })
                $("#CheckView").modal({
                    keyboard : false
                });
            }

            //跳转页面
            let JumpPage = function () {
                let page = $('#page').val();
                console.log("\n要跳转的页数为"+page);
                currentPageNo = page;
                getBillList('${pageContext.request.contextPath}/user/billDo/billQuery','POST');
            }

            $(function () {
                //查询按钮
                $('#billQueryBtn').click(function () {
                    currentPageNo = 1;
                    getBillList('${pageContext.request.contextPath}/user/billDo/billQuery','GET')
                })
                //删除确认按钮
                $('#deleteHaulBtn').click(function(){
                    let billId = $("#deleteBillId").val();
                    let url = '${pageContext.request.contextPath}/user/billDo/delete?id='+billId;
                    $("#delcfmOverhaul").modal('hide');
                    getBillList(url,'GET');
                });
                //设置分页栏点击时候的高亮
                $("#pagingul").on("click","li",function(){
                    //获取<a>标签中的value值
                    let url = '${pageContext.request.contextPath}/user/billDo/billQuery';
                    let aText = $(this).find('a').html();
                    console.log("");
                    console.log('被点击分页标签li，a的内容为：'+aText);
                    checkA();
                    if (aText.search("Prev")!==-1){
                        currentPageNo = currentPageNo-1;
                        $(".pagination > li").removeClass("active");
                        $("#"+currentPageNo).addClass("active");
                        getBillList(url,'GET');
                        checkA();
                    }else if(aText.search("Next")!==-1){
                        currentPageNo = currentPageNo+1;
                        $(".pagination > li").removeClass("active");
                        $("#"+(currentPageNo)).addClass("active");
                        getBillList(url,'GET');
                        checkA();
                    }else{
                        console.log("被点击页数的li标签id为："+this.id);
                        //不能直接写this.id这样会使currentPageNo变成字符串
                        //按下一页时currentPageNo+1会变成字符串的拼接  ‘11’
                        currentPageNo = parseInt(this.id);
                        getBillList(url,'GET');
                        $(".pagination > li").removeClass("active");
                        $(this).addClass("active");
                    }
                });
            })

            function getBillList(url,type) {
                $.ajax({
                        url:url,
                        type:type,
                        data:{
                            queryProductName:$('#billQueryCriteria').val(),
                            queryProviderId:Number($('#proNameList').val()),
                            queryIsPayment:$('#queryIsPayment').val(),
                            currentPageNo:currentPageNo,
                            pageSize:pageSize
                        },
                        success: function (data){
                            totalNum = data.totalNum;
                            totalPage = data.totalPage;
                            let billList = data.billList;
                            console.log("ajax返回的数据："+data);
                            console.log(data);
                            console.log("查到的数据总条数："+totalNum);
                            console.log("查到的数据总条页数："+totalPage);
                            console.log("当前页："+currentPageNo);
                            let html = "";
                            for (let i = 0; i < billList.length; i++) {
                                let id = billList[i].id;
                                let isPayment = '';
                                if (billList[i].isPayment === 2){
                                    isPayment = '已付款';
                                }else{
                                    isPayment = '未付款'
                                }
                                html += '<tr>'+
                                    '<td>'+billList[i].billCode+'</td>'+
                                    '<td>'+billList[i].productName+'</td>'+
                                    '<td>'+billList[i].proName+'</td>'+
                                    '<td>'+billList[i].totalPrice+'</td>'+
                                    '<td>'+isPayment+"</td>"+
                                    '<td>'+billList[i].creationDate+'</td>'+
                                    '<td>'+
                                    '<button type="button" class="btn btn-info" onclick="CheckModalContent('+id+');">'+
                                    '<a href="javascript:void(0)">check</a>'+
                                    '</button>';
                                //权限判断没有职位的人不会有删除与修改按钮
                                if(${sessionScope.userSession.userRole!=0}){
                                    html+='<button type="button" class="btn btn-warning">'+
                                        '<a href="${pageContext.request.contextPath}/user/billDo/modifyPage?id='+id+'">update</a>'+
                                        '</button>';
                                    if(${sessionScope.userSession.userRole!=1}){
                                        html+='<button type="button" class="btn btn-danger" onclick="showDeleteModal('+id+');">'+
                                            '<a href="javascript:void(0)">delete</a>'+
                                            '</button>';
                                    }
                                }
                                html+= '</td>'+
                                    '</tr>';
                            }
                            initPagination(totalPage,totalNum);
                            $('#billTbody').html(html);
                        }
                    }
                )
            }

            //初始化分页栏
            function initPagination(totalPage,totalNum) {
                let html = '';
                // &laquo;&raquo;
                html += '<li>'+
                    '<a aria-label="Previous" href="javascript:void(0);" id="prev">'+
                    '<span aria-hidden="true">Prev</span>'+
                    '</a>'+
                    '</li>';
                for (let i = 1; i <= totalPage; i++) {
                    html +='<li id="'+i+'">' +
                        '<a href="javascript:void(0);" >' +
                        i +
                        '</a>'+
                        '</li>';
                }
                html += '<li>'+
                    '<a aria-label="Next" href="javascript:void(0);"  id="next">'+
                    '<span aria-hidden="true">Next</span>'+
                    '</a>'+
                    '</li>';
                let html1 = "<span>共"+totalPage+"页 第</span>"+
                    "<input type='number' id='page' value='"+currentPageNo+"' min='1' max='"+totalPage+"' style='height: 34px'>"+
                    "<button class='btn btn-default' style='height: 34px' onclick='JumpPage()'>跳转</button>";
                $('#pagingul').html(html);
                $('#pagingul1').html(html1);
                //$('#pagingdiv').html('<h4>共有'+totalNum+'条记录<h4/>');
                $("#"+currentPageNo).addClass("active");
                checkA(currentPageNo);
            }

            //初始化供应商名称下拉栏
            function selectProName() {
                    $.ajax({
                        url:"${pageContext.request.contextPath}/user/providerDo/getAllBillProvider",
                        type:"GET",
                        success:function (data) {
                            console.log('公司查询下拉栏加载结果：')
                            console.log(data);
                            let html = '<option value="'+(0)+'" selected>ProviderName</option>';
                            for (let i = 0; i < data.length; i++) {
                                let id = data[i].id;
                                let proName = data[i].proName;
                                html += '<option value="'+id+'">'+proName+'</option>';
                            }
                            $('#proNameList').html(html);
                        }
                    })
            }

            //主要是用于检测当前页如果为首页，或者尾页时，上一页和下一页设置为不可选中状态
            function checkA(currentPageNO) {
                currentPageNO == 1 ? $("#prev").addClass("btn btn-default disabled") : $("#prev").removeClass("btn btn-default disabled");
                currentPageNO == totalPage ? $("#next").addClass("btn btn-default disabled") : $("#next").removeClass("btn btn-default disabled");
            }

            $(document).ready(function () {
                selectProName();
                getBillList('${pageContext.request.contextPath}/user/billDo/billQuery', 'GET',1);
                initPagination(totalPage);
            })

        </script>

    </body>
</html>
